<template>
  <el-card>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>CPI数据管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="10">
      <el-col :span="4">
        <el-input v-model="type" placeholder="请输入CPI类别名称查询" clearable @change="listPage()"></el-input>
      </el-col>
      <el-col :span="4">
        <el-input v-model="province" placeholder="请输入CPI所属省份名称查询" clearable @change="listPage()"></el-input>
      </el-col>
      <el-col :span="8">
        <el-button icon="el-icon-plus" type="success" @click="openAddDialog">添加</el-button>
      </el-col>

    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="90">
      </el-table-column>
      <el-table-column prop="cpi" label="CPI" width="100">
      </el-table-column>
      <el-table-column prop="type" label="CPI类别">
      </el-table-column>
      <el-table-column prop="province" label="省份">
      </el-table-column>
      <el-table-column prop="representTime" label="统计时间">
      </el-table-column>
      <el-table-column prop="updateTime" label="修改时间">
      </el-table-column>
      <el-table-column prop="updateId" label="修改人ID">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="点击修改" placement="bottom">
            <el-button type="warning" @click="openEditDialog(scope.row)" icon="el-icon-edit" circle></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="点击删除" placement="bottom">
            <el-button @click="remove(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pager.page"
      :page-sizes="[5, 10, 15, 20]" :page-size="pager.size" layout="total, sizes, prev, pager, next, jumper"
      :total="pager.total">
    </el-pagination>
    <el-dialog title="CPI数据添加" :show-close="false" :close-on-click-modal="false" :visible.sync="addDialogFlag">
      <el-form :model="cpi" :rules="rules" ref="cpi" label-width="formLabelWidth">
        <el-form-item label="CPI数值" :prop="cpiData">
          <el-input v-model="cpi.cpi" placeholder="请输入CPI数值"></el-input>
        </el-form-item>
        <el-form-item label="CPI类型" :prop="type">
          <el-select v-model="cpi.type" placeholder="请选择CPI类别">
            <el-option v-for="item in options_type" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="CPI所属省份" :prop="province">
          <el-select v-model="cpi.province" placeholder="请输入省份">
            <el-option v-for="item in options_province" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="CPI类型" :prop="type">
         <el-input v-model="cpi.type" placeholder="请输入CPI类型"></el-input>
       </el-form-item>
       <el-form-item label="CPI所属省份" :prop="province">
         <el-input v-model="cpi.province" placeholder="请输入CPI所属省份"></el-input>
       </el-form-item> -->
        <el-form-item label="时间" :prop="representTime">
          <el-input v-model="cpi.representTime" placeholder="请输入时间"></el-input>
        </el-form-item>
        <el-form-item label="修改人ID" :prop="updateId">
          <el-input v-model="cpi.updateId" placeholder="请输入修改人ID"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFlag=!addDialogFlag">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="CPI数据修改" :show-close="false" :close-on-click-modal="false" :visible.sync="editDialogFlag">
      <el-form :model="cpi" :rules="rules" ref="cpi" label-width="formLabelWidth">
        <el-form-item label="CPI数值" :prop="cpiData">
          <el-input v-model="cpi.cpi" placeholder="请输入CPI数值"></el-input>
        </el-form-item>
        <el-form-item label="CPI类型" :prop="type">
        <el-select v-model="cpi.type" placeholder="请选择CPI类别">
          <el-option v-for="item in options_type" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
         </el-form-item>
          <el-form-item label="CPI所属省份" :prop="province">
        <el-select v-model="cpi.province" placeholder="请输入省份">
          <el-option v-for="item in options_province" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
          </el-form-item>
        <!-- <el-form-item label="CPI类型" :prop="type">
          <el-input v-model="cpi.type" placeholder="请输入CPI类型"></el-input>
        </el-form-item>
        <el-form-item label="CPI所属省份" :prop="province">
          <el-input v-model="cpi.province" placeholder="请输入CPI所属省份"></el-input>
        </el-form-item> -->
        <el-form-item label="时间" :prop="representTime">
          <el-input v-model="cpi.representTime" placeholder="请输入时间"></el-input>
        </el-form-item>
        <el-form-item label="修改人ID" :prop="updateId">
          <el-input v-model="cpi.updateId" placeholder="请输入修改人ID"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFlag=!editDialogFlag">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </div>
    </el-dialog>

  </el-card>

</template>

<script>
  export default {
    data() {
      return {
        rules: {
          cpiData: [{
            required: true,
            message: '请输入CPI数据',
            trigger: 'blur'
          }, ],
          type: [{
            required: true,
            message: '请输入CPI类型',
            trigger: 'blur'
          }, ],
          province: [{
            required: true,
            message: '请输入CPI所属省份',
            trigger: 'blur'
          }, ],
          representTime: [{
            required: true,
            message: '请输入CPI所属时间',
            trigger: 'blur'
          }, ],
          updateId: [{
            required: true,
            message: '请输入修改人ID',
            trigger: 'blur'
          }, ]
        },
        cpi: {
          id: 0,
          cpi: '',
          type: '',
          province: '',
          representTime: '',
          updateTime: '',
          updateId: ''
        },
        addDialogFlag: false,
        editDialogFlag: false,
        cpiData: '',
        type: '',
        province: '',
        representTime: '',
        updateId: '',
        tableData: [],
        pager: {
          page: 1,
          size: 5,
          total: 0
        },
        options_type: [{
          value: '居民消费价格指数',
          label: '居民消费价格指数'
        }, {
          value: '食品烟酒类',
          label: '食品烟酒类'
        }, {
          value: '衣着类',
          label: '衣着类'
        }, {
          value: '居住类',
          label: '居住类'
        }, {
          value: '生活用品及服务类',
          label: '生活用品及服务类'
        }, {
          value: '交通和通信类',
          label: '交通和通信类'
        }, {
          value: '教育文化和娱乐类',
          label: '教育文化和娱乐类'
        }, {
          value: '医疗保健类',
          label: '医疗保健类'
        }, {
          value: '其他用品和服务类',
          label: '其他用品和服务类'
        }],
        options_province: [{
          value: '全国',
          label: '全国'
        }, {
          value: '北京市',
          label: '北京市'
        }, {
          value: '天津市',
          label: '天津市'
        }, {
          value: '河北省',
          label: '河北省'
        }, {
          value: '山西省',
          label: '山西省'
        }, {
          value: '内蒙古自治区',
          label: '内蒙古自治区'
        }, {
          value: '辽宁省',
          label: '辽宁省'
        }, {
          value: '吉林省',
          label: '吉林省'
        }, {
          value: '黑龙江省',
          label: '黑龙江省'
        }, {
          value: '上海市',
          label: '上海市'
        }, {
          value: '江苏省',
          label: '江苏省'
        }, {
          value: '浙江省',
          label: '浙江省'
        }, {
          value: '安徽省',
          label: '安徽省'
        }, {
          value: '福建省',
          label: '福建省'
        }, {
          value: '江西省',
          label: '江西省'
        }, {
          value: '山东省',
          label: '山东省'
        }, {
          value: '河南省',
          label: '河南省'
        }, {
          value: '湖北省',
          label: '湖北省'
        }, {
          value: '湖南省',
          label: '湖南省'
        }, {
          value: '广东省',
          label: '广东省'
        }, {
          value: '广西壮族自治区',
          label: '广西壮族自治区'
        }, {
          value: '海南省',
          label: '海南省'
        }, {
          value: '重庆市',
          label: '重庆市'
        }, {
          value: '四川省',
          label: '四川省'
        }, {
          value: '贵州省',
          label: '贵州省'
        }, {
          value: '云南省',
          label: '云南省'
        }, {
          value: '西藏自治区',
          label: '西藏自治区'
        }, {
          value: '陕西省',
          label: '陕西省'
        }, {
          value: '甘肃省',
          label: '甘肃省'
        }, {
          value: '青海省',
          label: '青海省'
        }, {
          value: '宁夏回族自治区',
          label: '宁夏回族自治区'
        }, {
          value: '新疆维吾尔自治区',
          label: '新疆维吾尔自治区'
        }],
      }
    },
    methods: {
      openAddDialog() {
        this.addDialogFlag = !this.addDialogFlag;
      },
      openEditDialog(row) {
        this.cpi = row;
        this.editDialogFlag = !this.editDialogFlag;
      },
      save() {
        // let params = new URLSearchParams();
        // params.append("cpi",this.cpi.cpi)
        this.$refs['cpi'].validate(valid => {
          if (valid) {
            this.$http.post('apis/cpi/add', this.cpi)
              .then(res => {
                if (res.data.code == 200) {
                  this.$message({
                    message: res.data.message,
                    type: 'success'
                  })
                  this.addDialogFlag = !this.addDialogFlag;
                  this.listPage()
                }
              }).catch(error => {
                this.$message.error('网络异常')
              })
          }
        })

      },
      update() {
        this.$refs['cpi'].validate(valid => {
          if (valid) {
            this.$http.post('apis/cpi/update', this.cpi)
              .then(res => {
                if (res.data.code == 200) {
                  this.$message({
                    message: res.data.message,
                    type: 'success'
                  })
                  this.editDialogFlag = !this.editDialogFlag;
                  this.listPage()
                }
              }).catch(error => {
                this.$message.error('网络异常')
              })
          }
        })
      },
      remove(row) {
        this.$http.post('apis/cpi/remove?id=' + row.id)
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: res.data.message,
                type: 'success'
              })
              this.listPage()
            }
          }).catch(error => {
            this.$message.error('网络异常')
          })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pager.size = val;
        this.listPage();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pager.page = val;
        this.listPage();
      },
      listPage() {
        this.$http.get('apis/cpi/listPage', {
          params: {
            page: this.pager.page,
            size: this.pager.size,
            type: this.type,
            province: this.province
          }
        }).then(res => {
          console.info(res)
          // console.log(res)
          this.tableData = res.data.data;
          this.pager.total = res.data.count;
        }).catch(error => {
          this.$message.error('网络异常')
        })
      }
    },
    created() {
      this.listPage();
    }
  }
</script>

<style scoped>
  .el-breadcrumb {
    padding-bottom: 20px;
  }

  .el-pagination {
    padding-top: 10px;
  }
</style>
